<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<html >
<head>
    <meta charset="UTF-8">
    <title th:text="${user.username} + ' - Online Judge'"></title>
    <meta http-equiv="keywords" content="ACM,OJ,OnlineJudge,JAVA,C++,HappyOJ,IDE,在线判题系统,在线IDE">
    <meta http-equiv="description" content="Topic of Online Judge System for ACM">
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" th:href="@{/css/styles.css}" >
    <script th:src="@{/js/jquery-1.7.2.js}"></script>
    <script th:src="@{/js/gdoj.js}"></script>
</head>
<body>
<div th:replace="common::web-navbar"></div>
<div class="container">
    <div class="content">
        <div class="content-with-sidebar">
            <div id="nav-content" >
                <a th:href="@{/profile/{username}(username=${user.username})}" class="current" th:text="${user.username}" ></a>
                <a th:href="@{/settings}" th:if="${session.session_username == user.username}">[[#{settings}]]</a>
                <a th:href="@{/problemset/status/{username}(username=${user.username})} + '/page/1'" target="blank">[[#{mysubmission}]]</a>
                <a th:href="@{/topics/{username}(username=${user.username})} + '/page/1'" target="blank">[[#{mytopics}]]</a>
            </div>
            <div class="roundbox profile-box">
                <div class="profile-box-info">
                    <ul>
                        <li class="uname">
                            <span class="rated-user" th:classappend="'user-rate-' + ${user.rate}" style="font-size: 16px;"
                                  th:text="(${user.nickname != null && user.nickname.length > 0})?${user.nickname}:${user.username}">
                            </span><br>
                            <span style="color:grey;" th:if="${user.nickname}" th:text="'@' + ${user.username}"></span>
                        </li>
                        <li class="motto">
                            <span style="color:rgba(15,20,25,1.00);line-height: 20px; font-size: 14px"
                                  th:if="${user.motto}" th:text="${user.motto}"></span>
                        </li>
                        <li>
                            <span style="margin-right: 20px;color: rgb(83, 100, 113);" th:if="${user.city!=null}">
                                <svg class="icon-svg-profile" viewBox="0 0 24 24" aria-hidden="true" ><g><path d="M12 7c-1.93 0-3.5 1.57-3.5 3.5S10.07 14 12 14s3.5-1.57 3.5-3.5S13.93 7 12 7zm0 5c-.827 0-1.5-.673-1.5-1.5S11.173 9 12 9s1.5.673 1.5 1.5S12.827 12 12 12zm0-10c-4.687 0-8.5 3.813-8.5 8.5 0 5.967 7.621 11.116 7.945 11.332l.555.37.555-.37c.324-.216 7.945-5.365 7.945-11.332C20.5 5.813 16.687 2 12 2zm0 17.77c-1.665-1.241-6.5-5.196-6.5-9.27C5.5 6.916 8.416 4 12 4s6.5 2.916 6.5 6.5c0 4.073-4.835 8.028-6.5 9.27z"></path></g></svg>
                                <span style="color: rgb(83, 100, 113);" th:text="${user.city}"></span>
                            </span>
                            <span style="margin-right: 20px;color: rgb(83, 100, 113);">
                                <svg viewBox="0 0 24 24" aria-hidden="true" class="icon-svg-profile"><g><path d="M7 4V3h2v1h6V3h2v1h1.5C19.89 4 21 5.12 21 6.5v12c0 1.38-1.11 2.5-2.5 2.5h-13C4.12 21 3 19.88 3 18.5v-12C3 5.12 4.12 4 5.5 4H7zm0 2H5.5c-.27 0-.5.22-.5.5v12c0 .28.23.5.5.5h13c.28 0 .5-.22.5-.5v-12c0-.28-.22-.5-.5-.5H17v1h-2V6H9v1H7V6zm0 6h2v-2H7v2zm0 4h2v-2H7v2zm4-4h2v-2h-2v2zm0 4h2v-2h-2v2zm4-4h2v-2h-2v2z"></path></g></svg>
                                <span th:title="${#dates.format(user.regdate,'yyyy-MM-dd HH:mm:ss')}" th:text="${user.registerDateFriendly} + ' ' + #{profile.join}"></span>
                            </span>
                            <span style="margin-right: 20px;color: rgb(83, 100, 113);">
                                <svg class="icon-svg-profile" viewBox="0 0 1024 1024" ><path d="M875.31 380.22c-0.01-0.03-0.01-0.06-0.02-0.1C853.24 155.29 635.4 82.85 635.4 82.85 535.21 50.42 439.9 70.27 439.55 70.34h-0.01C207 100.33 148.25 365.18 148.25 365.18c-31.54 170.82 88.33 317.1 90.53 319.77 0.02 0.02 0.04 0.05 0.06 0.07 31.37 29.56 258.2 253.82 266.57 262.08 0.15 0.15 0.36 0.23 0.57 0.23 7.69 8.86 21.25 8.81 28.86-0.11C586 887.25 767.58 702.49 767.58 702.49 917.96 558.91 876.1 383.47 875.31 380.22zM515.67 702.26c-142.56 0-259-114.16-266.35-257.8-8.23-160.83 122.91-294.69 280.49-286.29 140.73 7.5 252.58 126.34 252.58 271.85 0 150.35-119.42 272.24-266.72 272.24z" fill="#536471" p-id="10933"></path><path d="M612.36 444.58H510.88V292.1c0-16.14-13.21-29.35-29.35-29.35s-29.35 13.21-29.35 29.35v183.01c0 16.14 13.21 29.35 29.35 29.35 2.86 0 5.62-0.42 8.24-1.19h122.59c14.05 0 25.55-11.5 25.55-25.55v-7.58c0.01-14.07-11.49-25.56-25.55-25.56z" fill="#536471" p-id="10934"></path></svg>
                                <span th:title="${#dates.format(user.lastaccesstime,'yyyy-MM-dd HH:mm:ss')}" th:text="${user.lastAccessTimeFriendly}"></span>
                                <span style="color:green;font-weight:bold;" th:if="${user.online == 1}" th:text="#{profile.online}"></span>
                                <span th:if="${user.online == 0}" th:text="#{profile.Last_visit}"></span>
                            </span>
                        </li>
                        <li th:if="${session.session_username == user.username}">
                            <svg class="icon-svg-profile" viewBox="0 0 1024 1024" aria-hidden="true" ><path d="M857.07264 155.96032a121.85088 121.85088 0 0 0-26.17856-2.85696H193.10592c-8.99072 0-17.74592 1.00352-26.17856 2.85696C109.90592 165.95968 66.56 215.69024 66.56 275.57888v473.83552c0 67.09248 54.38976 121.48224 121.48224 121.48224h647.9104c67.09248 0 121.48224-54.38976 121.48224-121.48224V275.57888c0.00512-59.88864-43.3408-109.6192-100.36224-119.61856z m-31.31392 68.99712l-265.4464 247.38816c-13.16352 12.26752-30.32064 19.0208-48.31232 19.0208s-35.1488-6.7584-48.31232-19.02592L198.24128 224.95744h627.51744z m60.81536 524.45184c0 27.90912-22.7072 50.61632-50.61632 50.61632H188.04224c-27.90912 0-50.61632-22.7072-50.61632-50.61632V275.57888c0-3.27168 0.33792-6.45632 0.93184-9.55904l277.01248 258.16576c27.2128 25.36448 61.92128 38.04672 96.62976 38.04672s69.41696-12.68224 96.62976-38.04672l277.01248-258.16576c0.59392 3.0976 0.93184 6.28736 0.93184 9.55904v473.8304z" fill="#536471" p-id="5259"></path></svg>
                            [[#{profile.email}]]: <span th:text="${user.email}" /> &nbsp; &nbsp;<span style="color:grey">([[#{profile.invisible}]])</span>
                        </li>
                        <li th:if="${session.session_username == user.username}">
                            <svg class="icon-svg-profile" viewBox="0 0 1024 1024" ><path d="M291.84 258.56c10.24 0 87.04-7.68-2.56-130.56 0 0-35.84 46.08-40.96 92.16C245.76 250.88 273.92 258.56 291.84 258.56z" p-id="21603" fill="#536471"></path><path d="M734.72 258.56c10.24 0 87.04-7.68-2.56-130.56 0 0-35.84 46.08-40.96 92.16C688.64 250.88 716.8 258.56 734.72 258.56z" p-id="21604" fill="#536471"></path><path d="M509.44 181.76c10.24 0 87.04-7.68-2.56-130.56 0 0-35.84 46.08-40.96 92.16C463.36 174.08 491.52 181.76 509.44 181.76z" p-id="21605" fill="#536471"></path><path d="M1003.52 783.36l-71.68 0 0-307.2c0-46.08-35.84-81.92-81.92-81.92l-64 0 0-81.92c0-15.36-12.8-28.16-28.16-28.16l-40.96 0c-15.36 0-28.16 12.8-28.16 28.16l0 81.92-125.44 0L563.2 232.96c0-15.36-12.8-28.16-28.16-28.16L486.4 204.8c-15.36 0-28.16 12.8-28.16 28.16l0 161.28-117.76 0 0-81.92c0-15.36-12.8-28.16-28.16-28.16l-40.96 0c-15.36 0-28.16 12.8-28.16 28.16l0 81.92L181.76 394.24c-46.08 0-81.92 35.84-81.92 81.92l0 307.2L10.24 783.36c-5.12 0-10.24 5.12-10.24 10.24l0 81.92c0 51.2 43.52 94.72 94.72 94.72l832 0c53.76 0 97.28-43.52 97.28-97.28l0-71.68C1024 793.6 1013.76 783.36 1003.52 783.36zM151.04 476.16c0-17.92 15.36-30.72 30.72-30.72l665.6 0c17.92 0 30.72 15.36 30.72 30.72l0 307.2L151.04 783.36 151.04 476.16zM972.8 875.52c0 25.6-20.48 46.08-46.08 46.08L94.72 921.6C71.68 921.6 51.2 901.12 51.2 878.08l0-43.52 51.2 0c0 0 0 0 0 0l56.32 0c0 0 0 0 0 0L972.8 834.56 972.8 875.52z" p-id="21606" fill="#536471"></path></svg>
                            [[#{profile.birthday}]]: <span th:text="${#dates.format(user.birthday,'yyyy-MM-dd')}" />&nbsp; &nbsp;<span style="color:grey">([[#{profile.invisible}]])</span>
                        </li>
                        <li>
                            <svg class="icon-svg-profile" viewBox="0 0 1024 1024" ><path d="M768 128a128 128 0 0 1 128 128v512a128 128 0 0 1-128 128H256a128 128 0 0 1-128-128V256a128 128 0 0 1 128-128h512z m0 64H256a64 64 0 0 0-63.84 59.2L192 256v512a64 64 0 0 0 59.2 63.84L256 832h512a64 64 0 0 0 63.84-59.2L832 768V256a64 64 0 0 0-59.2-63.84L768 192z m-205.92 136.064a32 32 0 0 1 21.344 36.8l-0.96 3.616-94.88 288a32 32 0 0 1-61.76-16.416l0.96-3.616 94.88-288a32 32 0 0 1 40.416-20.384z m-183.68 35.36a32 32 0 0 1 8.608 41.44l-2.24 3.36-77.28 103.04 77.312 103.04a32 32 0 0 1-3.36 42.24l-3.04 2.56a32 32 0 0 1-42.208-3.296l-2.592-3.072-91.712-122.24a32 32 0 0 1-2.304-34.88l2.304-3.52 91.712-122.24a32 32 0 0 1 44.8-6.4z m267.2 0a32 32 0 0 1 42.208 3.36l2.624 3.04 91.68 122.24 2.304 3.52a32 32 0 0 1 0 31.36l-2.304 3.52-91.68 122.24-2.624 3.104a32 32 0 0 1-38.816 5.536l-3.36-2.24-3.072-2.56a32 32 0 0 1-5.568-38.848l2.24-3.36 77.28-103.072-77.28-103.04-2.24-3.36a32 32 0 0 1 8.64-41.44z" fill="#536471" p-id="14199"></path></svg>
                            [[#{profile.default_language}]]: <span th:text="${user.languageName}"></span></li>
                        <li>
                            <svg class="icon-svg-profile" viewBox="0 0 1024 1024" ><path d="M935.964444 967.111111h-853.333333a28.444444 28.444444 0 0 1 0-56.888889h853.333333a28.444444 28.444444 0 0 1 0 56.888889zM329.813333 754.744889A98.602667 98.602667 0 0 1 231.224889 853.333333h-73.059556a98.602667 98.602667 0 0 1-98.588444-98.588444V468.366222A98.616889 98.616889 0 0 1 158.179556 369.777778h73.059555a98.602667 98.602667 0 0 1 98.588445 98.588444v286.378667z m-56.888889-286.378667A41.699556 41.699556 0 0 0 231.224889 426.666667h-73.059556a41.699556 41.699556 0 0 0-41.699555 41.699555v286.392889A41.713778 41.713778 0 0 0 158.179556 796.444444h73.059555a41.699556 41.699556 0 0 0 41.699556-41.699555V468.366222zM656.924444 754.744889A98.602667 98.602667 0 0 1 558.336 853.333333h-73.059556a98.602667 98.602667 0 0 1-98.588444-98.588444V311.921778A98.602667 98.602667 0 0 1 485.276444 213.333333h73.059556a98.602667 98.602667 0 0 1 98.588444 98.588445v442.823111z m-56.888888-442.823111A41.699556 41.699556 0 0 0 558.336 270.222222h-73.059556a41.699556 41.699556 0 0 0-41.699555 41.699556v442.837333a41.699556 41.699556 0 0 0 41.699555 41.699556h73.059556a41.699556 41.699556 0 0 0 41.699556-41.699556V311.921778zM796.444444 270.222222c-7.864889 0-11.52-6.357333-11.52-14.222222v-85.873778C784.924444 142.222222 807.836444 142.222222 817.152 142.222222h33.479111a14.222222 14.222222 0 1 1 0 28.444445h-33.479111c-4.778667 0-7.552 0.227556-9.159111 0.497777L809.315556 256c0 7.864889-5.020444 14.222222-12.871112 14.222222zM793.742222 301.226667c-3.712 0-7.409778-1.564444-10.097778-4.124445-2.574222-2.688-4.124444-6.4-4.124444-10.097778s1.550222-7.395556 4.124444-10.097777c5.404444-5.404444 14.933333-5.262222 20.195556 0 2.56 2.702222 4.124444 6.257778 4.124444 10.097777 0 3.697778-1.564444 7.409778-4.124444 10.097778a15.075556 15.075556 0 0 1-10.097778 4.124445z" fill="#536471" p-id="20458"></path><path d="M969.813333 754.744889A98.602667 98.602667 0 0 1 871.224889 853.333333h-73.059556a98.602667 98.602667 0 0 1-98.588444-98.588444V155.477333A98.616889 98.616889 0 0 1 798.179556 56.888889h73.059555a98.602667 98.602667 0 0 1 98.588445 98.588444v599.267556z m-56.888889-599.267556A41.699556 41.699556 0 0 0 871.239111 113.777778h-73.059555a41.699556 41.699556 0 0 0-41.699556 41.699555v599.281778a41.699556 41.699556 0 0 0 41.699556 41.699556h73.059555a41.699556 41.699556 0 0 0 41.699556-41.699556V155.477333z" fill="#536471" p-id="20459"></path></svg>
                            [[#{profile.rating}]]: <span class="rated-user" th:classappend="'user-rate-' + ${user.rate}" th:text="${user.rating}" ></span> </li>
                    </ul>
                </div>
                <div class="profile-box-avatar">
                    <div class="profile-box-avatar-inner" >
                        <img class="big-avatar" th:alt="${user.username}" th:src="${user.avatar}" />
                    </div>
                </div>
            </div>
            <div class="roundbox profile-sub-module-box">
                <div style="padding: 4px 0 0 6px;position: relative;">
                    <div class="left">[[#{profile.rating_history}]]</div>
                    <div class="right"></div>
                </div>
                <br/>
                <div id="placeholder" style="width:100%;height:300px;word-wrap:break-word;"></div>
            </div>
            <script type="text/javascript" th:src="@{/js/jquery.flot.min.js}"></script>
            <script type="text/javascript">
                $(document).ready(function() {
                    OnlineJudge.ratingGragh("[[${user.username}]]");
                });
            </script>
            <div class="roundbox profile-sub-module-box">
                <div style="padding: 4px 0 0 6px;position: relative;">
                    <div class="left">[[#{profile.problem_solve}]] (<span class="problem_solved_num">0</span>)</div>
                    <div class="right"></div>
                </div>
                <br/>
                <div class="problem_solved" style="padding: 6px;word-wrap:break-word;">
                </div>
            </div>
            <div class="roundbox profile-sub-module-box">
                <div style="padding: 4px 0 0 6px;position: relative;">
                    <div class="left">[[#{profile.problem_try}]] (<span class="problem_try_num">0</span>)</div>
                    <div class="right"></div>
                </div>
                <br/>
                <div class="problem_try"  style="padding: 6px;word-wrap:break-word;">
                </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function () {
                    OnlineJudge.userProblemTry("[[${user.username}]]");
                });
            </script>
        </div>
        <div class="sidebar" th:replace="sidebar::web-sidebar"></div>
    </div>
    <div th:replace="common::web-footer"></div>
</div>
</body>
</html>
